﻿@page "/docs/components/jumbotron"

<Seo Canonical="/docs/components/jumbotron" Title="Blazorise Jumbotron system" Description="Learn to use and work with the Blazorise Jumbotron, a lightweight, flexible component for showcasing hero unit style content." />

<DocsPageTitle Path="Components/Jumbotron">
    Blazorise Jumbotron component
</DocsPageTitle>

<DocsPageLead>
    Lightweight, flexible component for showcasing hero unit style content.
</DocsPageLead>

<DocsPageParagraph>
    A lightweight, flexible component that can optionally extend the entire viewport to showcase some special content or information.
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Code Tag>Jumbotron</Code> main container
        <UnorderedList>
            <UnorderedListItem>
                <Code Tag>JumbotronTitle</Code> main title text
            </UnorderedListItem>
            <UnorderedListItem>
                <Code Tag>JumbotronSubtitle</Code> text located bellow title to give more context about the jumbotron
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    Examples
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic">
        <Paragraph>
            Jumbotron is a full width <Anchor To="docs/components/card" Title="Link to card component">card</Anchor> that is usually displayed at the top of the page, sometimes also referred to as a "Hero component".
        </Paragraph>
        <Paragraph>
            The jumbotron color should be only slightly off the background of the page to make your design feel "light".
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <BasicJumbotronExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="BasicJumbotronExample" />
</DocsPageSection>

<DocsPageSubtitle>
    API
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Attributes
</Heading>

<DocsAttributes Title="Jumbotron">
    <DocsAttributesItem Name="Background" Type="Background" Default="Default">
        Sets the bar background color.
    </DocsAttributesItem>
</DocsAttributes>